<template>
  <div>
      <div id="recharge_header">
       <i class="el-icon-arrow-left" @click="back"></i>
       <span class="recharge_header_font">我要充值</span>
     </div>
     <img src="../../assets/mzhpic/discount.png" alt="" class="discounts_img">
     <p class="discount_title">  充值须知：</p>
     <p class="discount_title">(1)  <span class="yuan">￥1</span>可以兑换<i class="el-icon-coin coin">10</i></p>
     <p class="discount_title">  &nbsp; &nbsp;   (2)  充值优惠以图片信息为准</p>
     <p class="discount_title">  (3)  充值大于100元，送充值金额的50%</p>
     <p class="discount_title">  (4)  越充越爽，越充越快乐</p>
     <br>
        <br>

   <div>
       请输入支付金额：￥<input type="number"  v-model="inputed"><br>
       实际充值金豆：<i class="el-icon-coin coin"></i>{{getmoney}}
   </div>

   <el-button type="danger" plain v-show="pay" @click="sao">确认支付</el-button>
   <div v-show="saoma">
       <p >请扫码支付</p>
       <img src="../../assets/mzhpic/wechat.png" alt="" > 
         <el-button type="success" round @click="finish">完成</el-button>
           <el-button type="info" round @click="finish">取消</el-button>    
   </div>
   

  </div>
</template>

<script>
export default {
    
data:function(){
    return{
        inputed:0,
        saoma:false
       
    }
},
    
methods:{
     back:function () {
            this.$router.go(-1);
            
        },
        sao:function(){
            this.saoma=true
        },
        finish:function(){
            this.saoma=false;
            
            console.log(this.getmoney)
          this.$http.put('/api/users/'+this.$store.state.id,{coin:this.$store.state.coin+this.getmoney}).then(({
                      data,config    //充值金币
                   })=>{
                  
                  if(data.code==200){
                      
                     this.$message.success ('充值成功')
                  }else{
                   
                   this.$message.error('充值失败')
                    }
              });
              this.inputed=0;

            
        }
},
computed:{
    getmoney:function(){
        if(this.inputed>100){
            return this.inputed*15
        };
        if(this.inputed==100){
            return 1500
        };
        if(this.inputed<100&&this.inputed>=50){
            return (parseFloat(this.inputed)+20)*10
        };
         if(this.inputed<50&&this.inputed>=30){
            return (parseFloat(this.inputed)+12)*10
        };
        if(this.inputed<30&&this.inputed>=0){
            return (parseFloat(this.inputed))*10
        };

    },
    pay:function(){
        if(this.inputed>0){
            return true
        }else{
            return false
        }
    },
    
}
}
</script>

<style scoped>
.coin{
    color:gold
}
#recharge_header{
    height: 70px;
    
    
    display: flex;
    align-items: center;
}
.recharge_header_font{
    font-size: 35px;margin-left: 260px;
    font-weight: bold;
    margin-left: 3.46667rem;
 
}
.discounts_img{
width: 100%;
}
.discount_title{
    color:red;
    font-size: 35px;
}
.yuan{
    color: gold;
}

    


</style>